<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src='./dist/jquery-3.2.1.js'></script>
	<title></title>
</head>
<body>
<h3>实例一</h3>
<h1>aaaaaaaaaaaaa</h1>
<h1>aaaaaaaaaaaaa</h1>
<h1>aaaaaaaaaaaaa</h1>
<h1>aaaaaaaaaaaaa</h1>
<h1>aaaaaaaaaaaaa</h1>
	<div><p>dddddddddddd</p></div>
<hr>
<p>ddddddddddddd</p>
<p>ddddddddddddd</p>
<p>ddddddddddddd</p>






<h3>实例二</h3>
<div><h1>sssssssssss</h1><h1>jjjjjjjjjjjjjjjjjjj</h1></div>
<h1>ssssssssssssss</h1>





<h3>实例三</h3>
<div><div><div><h1>aaaaaaaaaaaaa</h1><p>dddddddd</p><h1>aaaaaaaaaaaaa</h1></div></div></div>
<hr>
<div><div><button>打小金</button></div></div>





<h3>实例四</h3>
<div><div><button>打小金</button></div></div>
<div><div><div><h1>aaaaaaaaaaaaa</h1><p>dddddddd</p><h1>aaaaaaaaaaaaa</h1></div></div></div>





<h3>实例五</h3>
<h1>aaaaaaaaaaa</h1>
<h1>aaaaaaaaaaa</h1>
<h1>aaaaaaaaaaa</h1>
<div class="div1">
	<h1>aaaaaaaaaaa</h1>
	<h1>aaaaaaaaaaa</h1>
	<div class="div2">
		<h1>aaaaaaaaaaa</h1>
		<h1>aaaaaaaaaaa</h1>
	</div>
</div>
<h1>aaaaaaaaaaa</h1>
<h1>aaaaaaaaaaa</h1>
<h1>aaaaaaaaaaa</h1>


</body>
<script type="text/javascript">
//筛选选择器

//实例一
//第一个h1
	$('h1').eq(0).css({'color':'#f00'});
	//第一个h1
	$('h1').first().css({'color':'#f00'});
	//最后一个h1
	$('h1').last().css({'color':'#f00'});
	//从下标为1到下标为4不包括下标为4的h1
	$('h1').slice(1,4).css({'color':'#f00'});
	//除了第一个h1
	$('h1').not($('h1').eq(0)).css({'color':'#f00'});
	//在h1里面添加一个p标签
	$('h1').add('p').css({'color':'#f00'});


//实例二
//andSelf已经被浏览器淘汰，不用
$('div').next().andSelf().css({'color':'#00f'});



//实例三
$('button').click(function(){
$(this).parent().parent().prev().prev().children().children().children('h1').css({'color':'#f00'});
});

//实例四
$('button').click(function(){
	$(this).parent().parent().next().children().children().children('h1').css({'color':'#f00'});
});



//实例五
//div1的子元素
$('.div1').children('h1').css({'color':'#f00'});
//div1的子元素以及子元素的子元素
$('.div1').find('h1').css({'color':'#f00'});
//紧挨div1后面的全部标签
$('.div1').nextAll().css({'color':'#f00'});
//在div1的前后的所有标签
$('.div1').siblings().css({'color':'#f00'});
</script>
</html>